<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo-1</title>
</head>

<body>

  <div id="app">
    Hello !
  </div>

  <script>
    //   
    //   处理单个属性：
    // 
    // 模拟 vue 中的 data 选项
    let data = {
      msg: '你好。'
    }

    // 模拟 vue 的实例
    let vm = {}

    // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
    Object.defineProperty(vm, 'msg', {
        // 可枚举（可遍历）
        enumberable: true,
        // 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
        configurable: true,
        // 当获取值的时候执行
        get () {
            console.log('get : ', data.msg)
            return data.msg
        },
        // 当设置值的时候执行
        set (newVal) {
            console.log('set : ', newVal)
            if (newVal === data.msg) {
                return
            }
            data.msg = newVal
            // 数据更改，跟新 DOM 的值
            document.querySelector('#app').textContent = data.msg
        }
    })

    // 测试
    vm.msg = '你好，defineProperty !'
    console.log(vm.msg)

  </script>
</body>

</html>
